<template>
    <div>
        <br> <br>
        <!-- 购物车 -->
        <center>
        <table border="1px">
            <tr v-for="(item,index) in cart" :key="index">
                <td>{{item.name}}</td>
                <td>
                    <Button color="blue" @click="add(index,'-')">-</Button>
                    {{item.num}}
                    <Button color="blue"@click="add(index,'+')">+</Button>
                </td>
                <td>{{item.price}}</td>
            
                <td><Button color="green"  @click="del(index)">删除</Button></td>

            </tr>
        </table>
        <br>
        <Button @click="add_cart('汽车')">添加汽车</Button>
        &nbsp;&nbsp;
        你的购物车的数量为 {{ totalCount() }}
        &nbsp;&nbsp;
        <Button @click="des" color="purple">清空购物车</Button>

        </center>

        <!-- 监听属性 -->
        <button @click="counter++">
            点我++

        </button>
        <br>
        <!-- 反转 -->
        {{ reverse_msg }}
        <!-- 绑定样式 -->
        <div :class="{ active:isactive}"></div>


        <!-- 遍历 -->
        <ul>
            <li v-for="(item,index) in tlist" :key="index" :class="{on:index%2==0,off:index%2!=0}">
                {{item.text}}
                {{index}}
            </li>
        </ul>




        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>

        <div v-else>
            C

        </div>


        {{ msg }}
        <h1 v-show="ok">
            你看的见我了

        </h1>


    </div>
  
</template>

<script>
export default {
    data(){
        return {
            msg:'你好 这里是vue',
            ok:0 , //False 隐藏  1看见 0 隐藏
            type:'D',
            tlist:[{text:'汽车',price:10},{text:'手机'},{text:'食品'}],
            //购物车
            cart:[{name:'手机',price:10,num:0},{name:'食品',price:50,num:0}],
            isactive:1,
            counter:0
            
        }
    },
    //监听属性
    watch:{
        counter:function(nval,oval){
            console.log('计算器的变化:'+'从'+oval +'变成了'+nval)
        }


    },
    //计算属性
    computed:{
        //反转
        reverse_msg:function(){

            return '$'+this.msg.split('').reverse().join('')
        }
    },
    //自定义方法
    methods:{

        //清空购物车
        des:function(){
            this.cart = []

        },

        //删除操作
        del:function(index){
            //根据下标删除元素
            this.cart.splice(index,1);

        },
        

        //汇总数量
        totalCount:function(){
            //默认值
            let total = 0;
            //遍历
            for(let i=0,l=this.cart.length;i<l;i++){

                //累加
                total += (this.cart[i].num * this.cart[i].price)
            }

            return total

        },
        //加减法
        add:function(index,type){

            if(type == "+"){
                this.cart[index].num++;
            }else{
                if(this.cart[index].num >0 ){
                  this.cart[index].num--;  
                }
                
            }

        },






        //添加购物车方法
        add_cart:function(name){

            //声明购物车变量
            let cartlist = this.cart;
            //声明坐标
            let find = 0;
            //遍历购物车列表
            for(let i=0,l=cartlist.length;i<l;i++){

                //判断
                if(name == cartlist[i]['name']){
                    cartlist[i]['num']++;
                    find=1;
                    break;
                }

            }
            //没找到
            if(find == 0){
                cartlist.push({name:name,num:1,price:100})
            }
            //赋值
            this.cart = cartlist;

        }

    }

}
</script>

<style>
/* 单数是紫色 */
.on{background: blueviolet} 
.off{background: brown}
.active{
    width: 100px;
    height: 200px;
    background: burlywood

}
</style>